<template>
  <div class="useRule-main">
    <!--底色-->
    <div class="x-box"></div>
    <!--底色end-->
    <div class="useRule-info">
      <img :src="imgZhuangshi" alt="" class="zhangshi"/>
      <!--使用须知-->
      <div class="direction-for-use">
        <div class="click-direction md_s_font">使用须知</div>
        <ul class="directopm-for-use-ul" style="
                border-bottom: 1px solid #fff;">
          <li v-if="param.scpoeList&&param.type!=='present'&&param.type!=='ticket'">
            <span>{{param.scpoeList}}{{param.scope.indexOf("I") >= 0 ? "可用" : "不可用"}}</span>
          </li>
          <li v-if="param.date_disable"><span>{{param.date_disable | businessDay}}不可以使用</span></li>
          <li><span>使用时间：{{param.use_time | timeAnalysis}}</span></li>
          <li v-if="param.restricted"><span>满{{param.restricted}}元可用</span></li>
        </ul>
        <div class="dottedLine"></div>
        <ul class="directopm-for-use-ul" style="margin-left: -10%;"
            v-if="param.type!=='present'&&param.type!=='ticket'">
          <li v-if="!param.use_rule || (param.use_rule === 'M' || param.use_rule === 'DM')">
            <i class="iconfont icon-kediejiashiyong-"></i>
            <span v-if="!param.use_rule">不可叠加使用</span>
            <span v-if="param.use_rule === 'M' || param.use_rule === 'DM'">可叠加使用{{param.use_num}}张</span>
          </li>
          <li v-if="param.use_rule === 'D'|| param.use_rule === 'DM'"><i
              class="iconfont icon-keyuqitadianziquangongtongshiyong-"></i><span>&nbsp;可与其他券同使用
          </span></li>
          <li><i class="iconfont icon-buzhaolingbuduixian-"></i><span>&nbsp;不找零不兑现</span></li>
        </ul>
      </div>
      <img :src="imgClose" alt="" class="useRule-close" @click="$emit('cancel')">
      <!--使用须知end-->
    </div>
    <img :src="img" alt="" class="useRule-img">
  </div>
</template>

<script>

  export default {
    data: () => ({
      img: require("../../images/useRule_01.png"),
      imgZhuangshi: require("../../images/useRule_zhuangshi.png"),
      imgClose: require("../../images/useRule_close.png"),
    }),
    props: {
      param: {
        type: Object,
        default: () => {
        }
      }
    },
    filters: {
      timeAnalysis: function (value) {
        if (!value) {
          return;
        }
        if (value.indexOf('null') > 0) {
          value = value.substring(0, value.indexOf(','));
        }
        return value
      }
    },
    async created() {
      console.log(this.param);
//      this.myData = this.param;
    }
  }
</script>

<style lang="scss" scoped>
  div.useRule-main {
    position: fixed;
    z-index: 999;
    align-items: center;
    display: flex;
    text-align: center;
    width: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .x-box {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-47%, -47%);
      z-index: 997;
      width: 19rem;
      background-color: #d8d8d8;
      border-radius: 0.6rem;
      border: 2px solid #000;
    }
    .useRule-info {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 999;
      transform: translate(-50%, -50%);
      width: 19rem;
      background-color: #ffffff;
      border-radius: 0.6rem;
      border: 2px solid #000;
      > img.zhangshi {
        width: 4rem;
        height: 1.75rem;
        margin-top: 0.5rem;
        margin-left: -13rem;
      }
      img.useRule-close {
        position: fixed;
        left: 50%;;
        bottom: -4rem;
        z-index: 999;
        transform: translate(-50%, 0%);
        background-size: 100%;
        width: 1.5rem;
        height: 1.5rem;

      }
    }
    img.useRule-img {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 888;
      transform: translate(-50%, -50%);
      background-size: 100%;
      width: auto;
      height: 28rem;
    }

  }

  /*使用说明弹框*/
  div.direction-for-use {
    color: #4a4a4a;
    width: 88%;
    position: relative;
    left: 53%;
    transform: translate(-50%, 0%);
    /*虚线*/
    .dottedLine {
      border-bottom: 1px dashed #ddd;
      margin-bottom: 1.5rem;
    }
    .click-direction {
      text-align: left;
      line-height: 1.2rem;
      margin-bottom: 1.5rem;
      font-weight: 900;
    }
    ul.directopm-for-use-ul {
      padding-left: 6%;
      text-align: left;
      margin-bottom: 2rem;
      font-size: 0.8rem;
      color: #ff0000;
      letter-spacing: 0.5px;
      li {
        margin-bottom: 0.4rem;
        font-size: 1rem;
        span {
          color: #797979;
        }
      }
      &:nth-of-type(1) li {
        list-style-type: square;
      }
      &:nth-of-type(2) {
        margin-top: 0.5rem;
        margin-left: 0;
        li i {
          color: #beb3f7;
          margin-right: 0.3rem;
        }
      }
    }
  }
</style>